<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>出勤信息</title>
    <link rel="stylesheet" href="../static/main/css/pintuer.css">
    <link rel="stylesheet" href="../static/main/css/admin.css">
    <script src="../static/main/js/jquery.js"></script>
    <script src="../static/main/js/pintuer.js"></script>
    <%--    <title> Drop Down Sidebar Menu | CodingLab </title>--%>
    <link rel="stylesheet" href="../static/main/css/style1.css">
    <!-- Boxiocns CDN Link -->
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
//侧边栏
<div class="sidebar">
    <div class="logo-details">
        <i class='bx bxl-c-plus-plus'></i>
        <span class="logo_name">CodingLab</span>
    </div>
    <ul class="nav-links">
        <li>
            <a href="#">
                <i class='bx bx-grid-alt'></i>
                <span class="link_name">信息管理</span>
                <i class='bx bxs-chevron-down arrow'></i>
            </a>
            <ul class="sub-menu">
                <li><a class="link_name" href="#">Category</a></li>
                <li><a href="/toDepartment">部门信息</a></li>
                <%--				  <li><a href="sal.jsp">岗位信息</a></li>--%>
                <li><a href="/toEmployees">在职员工信息</a></li>
                <li><a href="/toDimissionEmp">离职员工信息</a></li>
                <li><a href="/toAttendance">出勤信息</a></li>
                <li><a href="/toRegister">注册管理员</a></li>

            </ul>
            <ul class="sub-menu blank">
                <li><a class="link_name" href="#">工资项目管理</a></li>
            </ul>
        </li>

        <li>
            <div class="iocn-link">
                <a href="#">
                    <i class='bx bx-collection'></i>
                    <span class="link_name">工资项目管理</span>
                </a>
                <i class='bx bxs-chevron-down arrow'></i>
            </div>


            <ul class="sub-menu">
                <li><a class="link_name" href="#">Category</a></li>
                <li><a href="/toDepartmentSalary">部门工资</a></li>
                <li><a href="/toEmployeesSalary">员工工资</a></li>
                <%--         <li><a href="#">工资类型</a></li>--%>
            </ul>
        </li>
        <li>
            <div class="iocn-link">
                <a href="#">
                    <i class='bx bx-book-alt'></i>
                    <span class="link_name">工资结算管理</span>
                </a>
                <i class='bx bxs-chevron-down arrow'></i>
            </div>
            <ul class="sub-menu">
                <li><a class="link_name" href="#">Posts</a></li>
                <li><a href="/toEmployeesSalaryOutput">员工工资结算</a></li>
                <!-- <li><a href="#">Login Form</a></li>
                <li><a href="#">Card Design</a></li> -->
            </ul>
        </li>
        <li>
            <a href="/toFrom">
                <i class='bx bx-pie-chart-alt-2'></i>
                <span class="link_name">报表管理</span>
            </a>
            <ul class="sub-menu blank">
                <li><a class="link_name" href="#">Analytics</a></li>
            </ul>
        </li>

        <div class="profile-details">
            <div class="profile-content">
                <img src="../static/main/img/profile.jpg" alt="profile">

            </div>
            <div class="name-job">
                <div class="profile_name">Prem Shahi</div>
                <div class="job">Web Desginer</div>
            </div>
            <i class='bx bx-log-out'></i>
        </div>
        </li>
    </ul>
</div>

<section class="home-section">
    <div class="home-content">
        <i class='bx bx-menu'></i>
        <span class="text">Drop Down Sidebar</span>
        <form action="/changeAttendanceDate" method="post" style="left: 50%">
            修改结算日期:<input style="width: 250px;line-height: 17px;display: inline-block" type="date" name="empDate"
                          required>
            <input type="submit" value="提交">
        </form>
    </div>

    <div class="panel admin-panel">
        <%--<form action="${ctx}/user/findBySql" id="listform" method="post">
            <div class="padding border-bottom">
                <ul class="search" style="padding-left: 10px;">
                    <li>
                        <input type="text" placeholder="请输入员工名" name="" class="input" value=""
                            style="width: 250px;line-height: 17px;display: inline-block" />
                        <a href="javascript:void(0)" onclick="changeSearch()" class="button border-main icon-search">搜索</a>
                    </li>
                </ul>
            </div>
        </form>--%>
        <h3 align="center">出勤信息</h3>

        <table class="table table-hover text-center">
            <thead>
            <tr>
                <%--                <th>员工号</th>--%>
                <th>员工</th>
                <th>结算日期</th>
                <th>出勤天数</th>
                <th>是否全勤</th>
<%--                <th>操作</th>--%>
                <%--                <th>
                                    <a onclick="changeSearch()" class="button border-main">添加员工</a>
                                    <br>
                                    <a onclick="changeSearch()" class="button border-main">批量修改</a>
                                </th>--%>
            </tr>
            </thead>

            <tbody>


            <c:forEach items="${emplAttendances}" var="emplAttendance">
                <tr>
                    <td>${emplAttendance.empName}</td>
                    <td>${emplAttendance.empDate}</td>
                    <td>
                        <form action="/changeAttendanceIsAtt" method="post">
                            <input name="empId" type="hidden" value="${emplAttendance.empId}">
                            <input type="number" name="empIsAtt" value="${emplAttendance.empIsAtt}" style="width: 50px">天
                            <input type="submit" class="button border-main" value="修改">
                        </form>
                    </td>
                    <td>
                        <c:if test="${emplAttendance.empIsAtt ge 25}">全勤</c:if>
                        <c:if test="${emplAttendance.empIsAtt lt 25}">缺勤</c:if>
                    </td>
                </tr>
            </c:forEach>


            </tbody>


        </table>

        <%--<table class="table table-hover text-center">
            <thead>
            <tr>
                <th>员工号</th>
                <th>员工姓名</th>
                <th>员工年龄</th>
                <th>员工性别</th>
                <th>员工电话</th>
                <th>员工职位</th>
                <th>员工部门</th>
                &lt;%&ndash;            <th>出勤情况</th>&ndash;%&gt;
                <th>操作</th>
                <th>
                    <a onclick="changeSearch()" class="button border-main">添加员工</a>
                    <br>
                    <a onclick="changeSearch()" class="button border-main">批量修改</a>
                </th>

            </thead>

            <tbody>

            <c:forEach items="${deptEmployees}" var="employees" varStatus="l">
                <tr>
                    <td>${employees.empId}</td>
                    <td>${employees.empName}</td>
                    <td>${employees.empAge}</td>
                    <td>${employees.empSex}</td>
                    <td>${employees.empPhone}</td>
                    <td>${employees.empPost}</td>
                    <td>${employees.empDeptName}</td>
                    <td><a class="button border-main">修改</a></td>
                </tr>
            </c:forEach>


            </tbody>


            </tr>


        </table>--%>
    </div>
</section>


<%--<script>
    function changeSearch() {
        $("#listform").submit();
    }
</script>--%>
<script>

    let arrow = document.querySelectorAll(".arrow");
    for (var i = 0; i < arrow.length; i++) {
        arrow[i].addEventListener("click", (e) => {
            let arrowParent = e.target.parentElement.parentElement;
            arrowParent.classList.toggle("showMenu");
        });
    }

    let sidebar = document.querySelector(".sidebar");
    let sidebarBtn = document.querySelector(".bx-menu");
    console.log(sidebarBtn);
    sidebarBtn.addEventListener("click", () => {
        sidebar.classList.toggle("close");
    });
</script>
</body>

</html>